<template>
  <div>
    <div id="imgregon" style="background-color: #fff;height: auto;overflow: hidden;clear:both;">
      <div class="bat-clearfix"></div>
      <table
        v-show="!showImg"
        @click="savecanvas"
        cellspacing="0"
        cellpadding="0"
        class="table canvas"
        width="100%"
      >
        <tr>
          <td class="tbhead" colspan="24">
            <img :src="logoUrl" alt>
            <h2>{{$route.query.EntName}}</h2>
            <h2>{{$route.query.LinkTel}}</h2>
            <h2>{{$route.query.priceType}}价格：{{$route.query.Price}}</h2>
          </td>
        </tr>

        <tr>
          <td colspan="24" width="20%" class="pal0 bl-none">棉包组批信息汇总表</td>
        </tr>

        <tr>
          <td colspan="6" width="20%" class="pal0 bl-none">
            <strong>组批批次</strong>
          </td>
          <td colspan="7" width="30%" class="pal0">
            <span class="num">{{d.cFactorybatchno}}</span>
          </td>
          <td colspan="5" width="20%">
            <strong>棉花类型</strong>
          </td>
          <td colspan="6" width="30%">{{d.cType}}</td>
        </tr>
        <tr>
          <td colspan="6">
            <strong>合计包数</strong>
          </td>
          <td colspan="7">
            <span class="num">{{d.nBagnum}}</span>
          </td>
          <td colspan="5">
            <strong>质量升贴水</strong>
          </td>
          <td colspan="6">
            <b class="orangecolor">{{d.STS}}</b>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="pal0 bl-none">
            <strong>合计毛重</strong>
          </td>
          <td colspan="7" class="pal0">
            <span class="num">{{fixValue(d.nGrossweight,1000,2)}}</span>t
          </td>
          <td colspan="5">
            <strong>平均回潮</strong>
          </td>
          <td colspan="6">{{fixValue(tb.nMoisture?tb.nMoisture:d.nMoisture,1,2)}}%</td>
        </tr>
        <tr>
          <td colspan="6" class="pal0 bl-none">
            <strong>合计皮重</strong>
          </td>
          <td colspan="7" class="pal0">
            <span class="num">{{fixValue(d.nTareweight,1,1)}}</span>kg
          </td>
          <td colspan="5">
            <strong>平均含杂</strong>
          </td>
          <td colspan="6">{{isJK?'':fixValue(d.nTrash,1,2)}}%</td>
        </tr>
        <tr>
          <td colspan="6" class="pal0 bl-none">
            <strong>合计净重</strong>
          </td>
          <td colspan="7" class="pal0">
            <span class="num">{{fixValue(d.nNetweight,1000,2)}}</span>t
          </td>
          <td colspan="5" class="pal0 bl-none">
            <strong>合计公重</strong>
          </td>
          <td colspan="6" class="pal0">
            <span
              class="num orangecolor"
            >{{fixValue((tb.nStdweight?tb.nStdweight:d.nStdweight),1,2)}}</span>t
          </td>
          <!-- <td colspan="5">
            <strong>轧工质量</strong>
          </td>
          <td
            colspan="6"
            style="font-size:9px !important;"
          >P1:{{da.nGingoodProp}}&nbsp; P2:{{da.nGinmidProp}}&nbsp; P3:{{da.nGinbadProp}}</td>-->
        </tr>

        <tr>
          <td colspan="6" rowspan="14" class="border2">
            <div style="width: 40px;margin:0 auto">
              <strong>颜色级</strong>
            </div>
          </td>
          <td colspan="7">各颜色级比例(%)</td>

          <td colspan="5" class="border2" rowspan="9">
            <strong>
              长度平均值
              <br>
            </strong>
            <b class="orangecolor">{{isJK?d.J_CD:da.nAvglength}}</b>
          </td>
          <td colspan="6">各长度值比例（%）</td>
        </tr>

        <tr>
          <td colspan="3">白棉1级</td>
          <td colspan="4" style="width:15px;">
            <span class="num">{{da.nColorgd11Prop}}</span>
          </td>

          <td colspan="4">32mm</td>
          <td colspan="4" width="12.5%">
            <span class="num">{{outPutNoZero(da.nLengrade8Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">白棉2级</td>
          <td colspan="4">
            <span class="num">{{da.nColorgd21Prop}}</span>
          </td>

          <td colspan="4">31mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade7Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">白棉3级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd31Prop)}}</span>
          </td>
          <td colspan="4">30mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade6Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">白棉4级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd41Prop)}}</span>
          </td>
          <td colspan="4">29mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade5Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            白棉5级
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd51Prop)}}</span>
          </td>
          <td colspan="4">28mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade4Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            淡点污棉1级
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd12Prop)}}</span>
          </td>
          <td colspan="4">27mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade3Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            淡点污棉2级
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd22Prop)}}</span>
          </td>
          <td colspan="4">26mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade2Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            淡点污棉3级
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd32Prop)}}</span>
          </td>
          <td colspan="4">25mm</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nLengrade1Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">淡黄染棉1级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd13Prop)}}</span>
          </td>
          <td colspan="5" class="border2" rowspan="6">
            <strong>
              马值平均值
              <br>
              <b class="orangecolor">{{isJK?d.J_MZ1:(tb.nAvgmike?tb.nAvgmike:d.nAvgmike)}}</b>
            </strong>
          </td>
          <td colspan="7">
            <strong class>各马克隆值级比例</strong>
          </td>
        </tr>

        <tr>
          <td colspan="3">淡黄染棉2级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd23Prop)}}</span>
          </td>
          <td colspan="4">C1</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMikegradec1Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">淡黄染棉3级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd33Prop)}}</span>
          </td>

          <td colspan="4">B1</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMikegradeb1Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">黄染棉1级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd14Prop)}}</span>
          </td>
          <td colspan="4">A</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMikegradeaProp)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">黄染棉2级</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nColorgd24Prop)}}</span>
          </td>
          <td colspan="4">
            B2
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMikegradeb2Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="6" rowspan="2" class="border2">
            <div style>
              <strong>
                长度整齐度
                <br>
                <strong class="orangecolor">{{outPutNoZero(d.nAvguniformity)}}</strong>
              </strong>
            </div>
          </td>
          <td colspan="3">
            最小值
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMinuniformity)}}</span>
          </td>
          <td colspan="4">
            C2
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMikegradec2Prop)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            最大值
            <span></span>
          </td>
          <td colspan="4">
            <span class="num">{{da.nMaxuniformity}}</span>
          </td>
          <td colspan="5" rowspan="2" class="border2">
            <div>
              <strong>强力平均值</strong>
              <br>
              <b class="orangecolor">{{isJK?d.J_QL:(da.nAvgintension?da.nAvgintension:d.nAvgintension)}}</b>
            </div>
          </td>
          <td colspan="4">最小值</td>
          <td colspan="4" width="12.5%">
            <span class="num">{{outPutNoZero(da.nMinintension)}}</span>
          </td>
        </tr>

        <tr>
          <td colspan="6" class="bl-none">
            <div style="margin:0 auto;">
              <strong>轧工质量</strong>
            </div>
          </td>
          <td colspan="7">
            <span
              class
              style="font-size:9px;"
            >P1:{{da.nGingoodProp}}%&nbsp; P2:{{da.nGinmidProp}}%&nbsp; P3:{{da.nGinbadProp}}%</span>
          </td>

          <td colspan="4">最大值</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(da.nMaxintension)}}</span>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="bl-none">Rd(%)</td>
          <td colspan="3">平均值</td>
          <td colspan="4">
            <span class="num">{{outPutNoZero(d.nAvgrd)}}</span>
          </td>
          <td colspan="5">+b</td>
          <td colspan="4">平均值</td>
          <td colspan="4">
            <strong class>{{da.nAvgpb}}</strong>
          </td>
        </tr>
      </table>
      <table
        width="100%"
        cellspacing="0"
        cellpadding="0"
        class
        style="padding-top: 5px;"
        id="aboutus"
      >
        <td width="33%" style="vertical-align:top"></td>
        <td width="100%" class="bat-text-right" style="vertical-align:middle"></td>
        <td width="37%" class="bat-text-right" style="color:#555;"></td>
      </table>
    </div>
    <div class="image" v-show="showImg" >
      <img :src="dataURL" alt ref="picPage">
    </div>
    <p
      class="pt10 pb10 c000"
      style="font-size:12px !important;margin-bottom:60px;text-align:left;padding:10px;"
      id="viewsite"
    >注：指标来自于第一次入库公检数据，升贴水暂按郑商所相关通告计算，交割库升贴水未计算在内。仅供参考。</p>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import html2canvas from "html2canvas";

import api from "@/api/api";
export default {
  data() {
    return {
      isbuy: false,
      TradePrice: 0,
      showZDY: false,
      logoUrl: "",
      userList: {},
      showImg: false,
      dataURL: "",
      tb: {},
      clientHeight: "",
      user: {
        price: 0,
        entname: "",
        linktel: "",
        priceType: "公重"
      },
      file: [],
      d: {
        nGrossweight: 0,
        nTrash: 0,
        nNetweight: 0,
        nTareweight: 0,
        nStdweight: 0
      },
      da: {}
    };
  },
  computed: {
    isJK: function() {
      return this.d.BatchType == 2 || this.d.BatchType == 3;
    }
  },
  created() {
    this.user.entname = this.$store.state.userInfo.EntName;
    this.user.linktel = this.$store.state.userInfo.phoneno;
    if (this.$store.state.userInfo.logo) {
      this.logoUrl =
        "https://www.icottontrade.com/cot/Upload/mylogo/" +
        this.$store.state.userInfo.logo;
    } else {
      this.logoUrl = "https://www.icottontrade.com/cot/Upload/logo.jpg";
    }
  },

  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },

  methods: {
    changeFixed(clientHeight) {
      //动态修改样式
      console.log(clientHeight);
      this.$refs.picPage.style.height = clientHeight + "px";
    },
    savecanvas() {
      let canvas = document.querySelector(".canvas");
      let that = this;
      html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
        function(canvas) {
          let type = "png";
          let imgData = canvas.toDataURL(type);
          // 照片格式处理
          let _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, "jpeg");
            let r = type.match(/png|jpeg|bmp|gif/)[0];
            return "image/" + r;
          };
          imgData = imgData.replace(_fixType(type), "image/octet-stream");
          let filename = "UUSound" + "." + type;
          that.saveFile(imgData, filename);
        }
      );
    },

    saveFile(data, filename) {
      this.dataURL = data;
      this.showImg = true;
      // let save_link = document.createElementNS(
      //   "http://www.w3.org/1999/xhtml",
      //   "a"
      // );
      // save_link.href = data;
      // save_link.download = filename;

      // let event = document.createEvent("MouseEvents");
      // event.initMouseEvent(
      //   "click",
      //   true,
      //   false,
      //   window,
      //   0,
      //   0,
      //   0,
      //   0,
      //   0,
      //   false,
      //   false,
      //   false,
      //   false,
      //   0,
      //   null
      // );
      // save_link.dispatchEvent(event);
    },

    genPic2() {
      if (!this.$store.state.userInfo.phoneno) {
        Toast.fail("请先注册！");
        return;
      }
      this.user.entname = this.$store.state.userInfo.EntName;
      this.user.linktel = this.$store.state.userInfo.phoneno;
      this.user.price = this.d.SellPrice;
      this.showZDY = true;
    },
    add() {
      this.user.price += 50;
    },
    reduce() {
      this.user.price -= 50;
    },
    confirm() {
      this.genPic();
    },
    genPic() {
      if (!this.$store.state.userInfo.phoneno) {
        Toast.fail("请先注册！");
        return;
      }
      this.user.entname = this.$store.state.userInfo.EntName;
      this.user.linktel = this.$store.state.userInfo.phoneno;
      var para = {
        UserID: this.$store.state.userInfo.ID,
        RowID: this.d.RowID,
        priceType: this.user.priceType
      };
      if (this.user.entname) {
        para.EntName = this.user.entname;
      }
      if (this.user.linktel) {
        para.LinkTel = this.user.linktel;
      }
      if (this.user.price) {
        para.Price = this.user.price;
      } else {
        para.Price = this.d.SellPrice;
      }
      api.GenPic(para).then(res => {
        this.user.entname = "";
        this.user.linktel = "";
        this.user.price = 0;
        if (res) {
          this.$router.push("/user/viewPic?url=" + res);
        }
      });
    },
    share() {
      var desc = "聚棉网为您推荐以下资源";
      var para = this.$route.query;
      var link =
        "https://www.icottontrade.com/%23/detailPic/" +
        this.$route.params.id +
        "?RowID=" +
        para.RowID +
        "%26EntName=" +
        para.EntName +
        "%26LinkTel=" +
        para.LinkTel +
        "%26Price=" +
        para.Price +
        "%26priceType=" +
        para.priceType;
      var url =
        "https://www.icottontrade.com/cot/redirect/go?url=" + encodeURI(link);
      console.log(url);
      wx.onMenuShareAppMessage({
        title: this.$store.state.userInfo.NickName + "为您推荐",
        desc: desc,
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.logoUrl, // 自定义图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          // 用户确认分享后执行的回调函数
          Toast({
            message: "分享成功",
            duration: 1500
          });
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        title: this.$store.state.userInfo.NickName + "为您推荐",
        link: link,
        imgUrl: this.logoUrl // 自定义图标
      });
    },

    outPutNoZero(v) {
      if (v) {
        if (parseFloat(v) == 0) {
          return "--";
        } else {
          return v;
        }
      } else {
        return "--";
      }
    },
    fixValue(s, iRate, n) {
      if (s) {
        return (s / iRate).toFixed(n);
      } else {
        return "--";
      }
    }
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`; //document.body.clientWidth;
    //console.log(self.clientHeight);
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
    var para = {
      BatchNo: this.$route.params.id,
      OpenID: this.$store.state.userInfo.OpenID,
      RowID: this.$route.query.RowID
    };
    api.getBatchInfo(para).then(res => {
      this.d = res.data;
      this.userList = res.userList;
      this.TradePrice = res.TradePrice;
      this.tb = res.tb == null ? {} : res.tb;
      // if (!this.d.nStdweight) {
      //   this.d.nGrossweight = 0;
      //   this.d.nNetweight = 0;
      //   this.d.nStdweight = 0;
      // }
      this.da = res.dataAvg;
      this.share();

      this.savecanvas();
    });
  }
};
</script>

<style scoped lang='less'>
.image {
  img {
    width: 100%;
  }
}
.popprice {
  width: 80%;

  .ml1em {
    margin-left: 1em;
  }
  .btnPrice {
    margin-top: 1em;
  }
  .inline {
    text-align: left;
    .van-radio {
      display: inline-block;
    }
  }
  .logo {
    text-align: center;
    img {
      height: 100px;
      width: 100px;
      border: 1px solid #ccc;
    }
  }
  h4 {
    line-height: 2em;
  }
  .pub {
    width: 50%;
    display: block;
    margin: 1em auto;
    background: #2cb98e;
    border: 1px solid #2cb98e;
  }
}
.price {
  height: 80px;
  margin: 10px 5px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  .btnbuy {
    font-size: 12px;
    background: #fff;
    border: 1px solid orange;
    padding: 0 1em;
    margin-top: 10px;
    height: 35px;
    line-height: 30px;
    font-weight: bold;
    width: 10em;
    color: orange;
    i {
      font-size: 22px;
      position: relative;
      top: 3px;
    }
  }
  .trade {
    line-height: 1.3em;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 5px;
    > div {
      height: 1.3em;
    }
    > span {
      display: block;
      font-size: 14px;
    }
  }
  > div {
    margin: 10px;
    border-right: 1px solid #f2f2f2;
    text-align: center;
    b {
      line-height: 60px;
      font-size: 14px;
    }
    strong {
      font-size: 16px;
      display: block;
      color: red;
      margin-top: 10px;
    }
    span {
      font-size: 14px;
      display: block;
    }
  }
  > div:last-child {
    border: 0;
  }
}
.pt10 {
  padding-top: 10px;
  background: #fff;
}
.bat-content-padded {
  padding: 5px;
}
.pd10 {
  padding: 10px;
}
.bat-text-right {
  text-align: right;
}
.m5 {
  margin: 5px;
}
.mt15 {
  margin-top: 15px;
}
.mt10 {
  margin-top: 10px;
}
.bat-pull-left {
  float: left;
}
.bat-form {
  font-size: 14px;
  > div {
    border-bottom: 1px solid #ccc;
  }
}
.bat-pull-right {
  float: right;
}
.pl10 {
  padding-left: 10px;
}
.h100 {
  height: 100px;
}
.bat-card {
  border-radius: 0 !important;
  border-color: #666 !important;
  padding-right: 15px;
}
.bat-input-addon {
  font-size: 12px;
  color: #000 !important;
  display: inline-block;
  width: 6em;
}
.table {
  border: 1px #3a3333 solid;
  .tbhead {
    height: 7em;
    width: 7em;
    padding-left: 7em;
    text-align: center;
    font-weight: bold;
    h2 {
      font-size: 16px;
    }
    img {
      height: 6em;
      position: absolute;
      left: 1em;
      top: 0.5em;
    }
  }
}
.table tr td {
  border-bottom: 1px #3a3333 solid;
  border-left: 1px #3a3333 solid;
  border-right: 1px #3a3333 solid;
  font-size: 12px;
  padding: 0;
  text-align: center;
  color: #000;
  height: 20px;
  vertical-align: middle;
}
.border2 {
  border: 2px solid #333 !important;
}
.table tr td.lh20 {
  line-height: 33px;
}
.table2 tr:last-child td {
  border-bottom: 0;
  font-weight: bold;
  font-size: 16px !important;
}
.bat-input-addon,
.bat-input-row {
  font-size: 12px;
  position: relative;
  span {
    width: 6em;
    padding-left: 5px;
  }
  .bat-input {
    float: right;
    padding-right: 5px;
    max-width: 18em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.img_div {
  width: 691px;
  height: 960px;
}
.hide_html {
  display: none;
}
.bat-btn-info {
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
}
.pr10 {
  padding-right: 10px;
}
.pt25 {
  padding-top: 25px;
}
.bat-btn {
  padding: 0.5em 0.8em;
  background: #2dbaba;
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
}
.bat-nav,
.bat-nav .bat-bar-tab {
  height: 112px;
  background-color: #fff;
}
.bat-nav .bat-bar-tab .bat-iconfont {
  font-size: 22px;
  color: #8f8f94;
  padding-top: 17px;
  height: 60px;
  line-height: 30px;
  display: inline-block;
  font-size: 2em !important;
}
.bat-nav .bat-bar-tab li {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 25px;
}
.bat-nav .bat-bar-tab li p {
  font-size: 24px !important;
}
.active-warning {
  background-color: #faa732;
  color: #fff;
  line-height: 32px;
  border: 0;
}
.title {
  font-size: 1rem !important;
  padding: 10px;
}
.bat-card {
  border: 1px #666 solid;
  border-radius: 5px !important;
}
.bat-input-addon,
.bat-input-row {
  min-height: 2.5em;
  line-height: 2.5em;
  text-align: left;
}
.price {
  font-size: 1.5em !important;
  color: #faa732 !important;
}
.bat-input-row .bat-input {
  text-align: right;
}
.s-td {
  display: block;
  width: 50%;
  height: 100%;
  text-align: center;
  float: left;
  line-height: 72px;
}
.s-td-bl {
  border-left: 1px #d0cdcd solid;
}
.bat-icon-favorfill {
  color: #faa732 !important;
}
.nonone {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.bat-nav .bat-bar-tab .bat-iconfont {
  font-size: 1.7em !important;
}
footer .bat-bar-tab li a span.bat-label {
  padding: 1px 7px;
  top: 13px;
}
.tel-box {
  bottom: 132px;
  right: -16px;
  width: 143px;
  border-radius: 0;
  z-index: 11;
  line-height: 50px;
}
.tel-box i {
  font-size: 56px !important;
}
.tel-box span {
  font-size: 23px !important;
  width: 67px;
  line-height: 27px;
}
.bl-none {
  border-left: 0 !important;
}
.bb-none {
  border-bottom: 0 !important;
}
/* new */
.tb2 {
  border-width: 2px !important;
}
.tb2 tr td {
  border-bottom: 2px #000 solid !important;
  border-left: 2px #000 solid !important;
  font-size: 18px !important;
  height: 40px !important;
}
.tb2 tr td strong {
  font-size: 18px !important;
}
.tb2 tr td.bb-none {
  border-bottom: 0 !important;
}
.tb2 tr td.bl-none {
  border-left: 0 !important;
}
.tb2 tr td.lh20 {
  line-height: 20px;
}
.tb2 tr td.lh20 div {
  width: auto !important;
}
.table tr td.spw {
  width: 13% !important;
}
.defineinput {
  /*自定义input*/
  border: 0 !important;
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
}
/* .table tr td.spw2{
                                                                width: 16% !important;
                                                            } */
table tr td .orangecolor {
  color: red !important;
  font-size: 14px !important;
}
/* num 所有数字 控制 */
.num {
  font-size: 14px !important;
}
.erweima {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -328px;
  margin-left: -235px;
  width: 470px;
  height: 623px;
  background-color: #fff;
}
.contactTel {
  font-size: 14px;
}
.contact {
  margin: 0 0 0 5em;
  float: none !important;
  max-width: none !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  > div {
    display: inline-block;
    margin-right: 5px;
    > b {
      color: rgb(44, 148, 217);
    }
    i {
      position: relative;
      top: 2px;
    }
  }
}
.tel-box {
  position: fixed;
  background-color: rgba(44, 148, 217, 0.5);
  width: 80px;
  height: 80px;
  font-size: 12px;
  color: #fff !important;
  right: 20px;
  bottom: 118px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
</style>